<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline">
          <i class="el-icon-search btn-search" @click="handleShowSearch()" />

          <div class="btn-box">
            <a
              class="el-button el-button--success el-button--medium"
              href="http://123.57.59.222:8081/api/file/course_supplier_template.xlsx"
              type="primary"
            >模版下载</a>
            <el-upload

              :action="UploadUrl()"
              :show-file-list="false"

              :on-success="handleImageSuccess"
              class="upload_image"
            >
              <el-button v-show="roleName==&quot;admin&quot;" type="primary">导入</el-button>
            </el-upload>
            <el-button
              type="primary"
              icon="el-icon-document"
              :disabled="list.length <= 0"
              @click="dowloadExcel"
            >导出excel</el-button>
          </div>
          <div v-show="showbtns == true" class="search-lf">
            <el-form-item label="PO单号">
              <el-input v-model="listQuery.po" placeholder="po单号" />
            </el-form-item>

            <el-form-item class="regin_search" label="战区">
              <!-- <el-input v-model="listQuery.regionName" placeholder="战区"></el-input> -->
              <el-select
                v-model="listQuery.regionName"
                filterable

                clearable
                placeholder="请选择"
                @change="handleChangePro4($event)"
              >
                <el-option
                  v-for="item in regiosList"
                  :key="item.id"
                  :label="item.region"
                  :value="item.region"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="省份">
              <el-select
                v-model="listQuery.provinceName"
                filterable

                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in allProvinceList"
                  :key="item.provinceId"
                  :label="item.province"
                  :value="item.province"
                />
              </el-select>
            </el-form-item>
            <el-form-item class="regin_search" label="课程编导">
              <el-select
                v-model="listQuery.courseChargeName"
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in courseChargeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="课程名称">
              <el-input
                v-model="listQuery.courseName"
                placeholder="课程名称"
              />
            </el-form-item>

            <el-form-item class="btn-search-li">
              <el-button type="primary" plain @click="getList()">查询</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-col>
    </el-row>

    <el-table
      v-loading="listLoading"
      border
      height="650px"
      :data="list"
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width="130px" label="PO单号">
        <template slot-scope="{ row }">
          <span>{{ row.po }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程名称">
        <template slot-scope="{ row }">
          <span>{{ row.courseName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程编导">
        <template slot-scope="{ row }">
          <span>{{ row.courseChargeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="课程ID">
        <template slot-scope="{ row }">
          <span>{{ row.courseId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="供应商类型">
        <template slot-scope="{ row }">
          <span>{{ row.supplierTypeName }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="200px" label="供应商名称">
        <template slot-scope="{ row }">
          <span>{{ row.supplierName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="服务类型">
        <template slot-scope="{ row }">
          <span>{{ row.serviceTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="100px" label="服务名称">
        <template slot-scope="{ row }">
          <span>{{ row.serviceName }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="100px" label="更新日期">
        <template slot-scope="{ row }">
          <span>{{ row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column
        class-name="status-col"
        width="120px"
        label="预估结算日期"
      >
        <template slot-scope="{ row }">
          <span>{{ row.estimatedSettlementDate }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="单价">
        <template slot-scope="{ row }">
          <span>{{ row.unitPrice }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="数量">
        <template slot-scope="{ row }">
          <span>{{ row.quantity }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" label="预估成本">
        <template slot-scope="{ row }">
          <span>{{ row.estimatedGenerationCost }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="已支付">
        <template slot-scope="{ row }">
          <span>{{ row.supplierPaidAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="未支付">
        <template slot-scope="{ row }">
          <span>{{ row.supplierUnpaidAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="160px" label="供应商评级">
        <template slot-scope="{ row }">
          {{ row.finalEvaluation }}
          <!-- <span>{{ row.finalEvaluation }}</span> -->
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" width="200px" label="说明">
        <template slot-scope="{ row }">
          <span>{{ row.supplierPaidAmount }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total >= 20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  poCourseSupplierList,
  addPoCourseSupplier,
  updatePoCourseSupplier,
  delPoCourseSupplier,
  contractPO,
  getProvinces,
  poSettlement
} from '@/api/supplier'
import { RegionsProvince } from '@/api/region'
import { regiosList } from '@/api/user'
import {
  getSupplierContent,
  getCourseCharge,
  baseUrl2,
  getSupplierType
} from '@/api/remote-search'
import { exportCourseSupplier } from '@/api/exportExcel'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

export default {
  name: 'CorsesList',
  components: { Pagination },
  filters: {
    statusColorFilter(status) {
      const statusMap = {
        1: 'success',
        2: 'danger',
        3: 'warning',
        4: 'info',
        5: ' '
      }
      return statusMap[status]
    },
    statusFilter(status) {
      const statusMap = {
        1: '进行中',
        2: '已完成',
        3: '已过期',
        0: '新合同'
      }
      return statusMap[status]
    }
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      uploadUrl: '',
      showbtns: false,
      list: [],
      roleName: sessionStorage.getItem('memberName'),
      editDisabled: false,
      provinceList: [], // 战区下面省份
      allProvinceList: [], // 所有省份
      regiosList: [], // 战区
      downloadLoading: false,
      courseList: [], // 课程编导list
      courseChargeList: [], // 课程编导
      SupplierType: [], // 供应商类型
      courseTypeList: [], // 课程类别
      shootModeList: [], // 拍摄形式
      CourseSchedule: [], // 课程进度
      CourseLineState: [], // 课程上线状态
      subjectTypeList: [], // 学科门类
      onlineList: [], // 上线情况
      majorList: [], // 专业分类
      multipleSelection: '', // 多选
      isSure: true,
      rowEdit: false,
      newPoId: '', // 新增之后返回的id
      downloadLoading: false,
      supplierContentList: [], // 课程编导集合
      productLineList: [], // 课程ID集合
      contracTypeList: [], // 合同类型
      provinceList: [], // 战区省份
      allProvinceList: [], // 所有省份
      regiosList: [], // 讲师姓名
      corsesList: {
        // contractDeliveryDate: "",
        isTrailer: '0'
      },
      total: 0,
      dialogVisibleMenu: false,
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem('token'),
        page: 1,
        customerName: '',
        regionName: '',
        provinceName: '',
        pageSize: 20
      },

      poId: '', // POid
      rolesList: [],

      dialogVisible: false,
      dialogType: 'new',
      checkStrictly: false,

      ids: '',
      idsPo: ''
    }
  },
  computed: {},
  created() {
    this.getList()
    this.getListes()
  },

  methods: {
    UploadUrl() {
      return baseUrl2 + '/api/file/import_course_supplier'
    },
    handleClose() {
      this.editDisabled = false
    },
    handleImageSuccess(file) {
      if (file.code === 200) {
        this.$message.success(file.message)
        this.getList()
      } else {
        this.$message.error(file.message)
      }
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns
    },
    dowloadExcel() {
      exportCourseSupplier(this.listQuery)
      // window.location.href =
      //   baseUrl2 +
      //   "/api/file/export_course_supplier?customerName=" +
      //   this.listQuery.customerName +
      //   "&provinceName=" +
      //   this.listQuery.provinceName +
      //   "&regionName=" +
      //   this.listQuery.regionName +
      //   "&courseChargeName" +
      //   this.listQuery.courseChargeName +
      //   "&supplierName" +
      //   this.listQuery.supplierName;
    },
    handleChangePro4(id) {
      let obj = {}
      obj = this.regiosList.find((item) => {
        return item.region === id
      })
      this.contractList.regionId = obj.id
      RegionsProvince(obj.id).then((res) => {
        this.provinceList = res.data.data
      })
    },
    handleCouseChangeName(id) {
      let obj = {}
      obj = this.courseChargeList.find((item) => {
        return item.name === id
      })
      this.corsesList.courseChargeId = obj.id
    },
    handleSupplierType(id) {
      let obj = {}
      obj = this.SupplierType.find((item) => {
        return item.name === id
      })
      this.corsesList.supplierTypeId = obj.id
    },
    handleExport() {
      if (this.multipleSelection.length <= 0) {
        this.$message.error('请选择你要更新的数据')
        return false
      }
      const data = {
        ids: this.idsPo
      }
      poSettlement(data).then((res) => {
        if (res.data.code === '200') {
          this.$message.success(res.data.message + '请到供应商结算总单查看')
          this.getList()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    getListes() {
      getProvinces().then((res) => {
        this.allProvinceList = res.data.data
      })
      regiosList().then((res) => {
        this.regiosList = res.data.data
      })
      getSupplierContent().then((res) => {
        this.supplierContentList = res.data.data
      })
      getCourseCharge().then((res) => {
        this.courseChargeList = res.data.data
      })
      getSupplierType().then((res) => {
        this.SupplierType = res.data.data
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val

      const res = []
      if (this.multipleSelection.length > 0) {
        this.multipleSelection.forEach((r) => {
          res.push(r.id)
        })
        this.idsPo = res.join(',')
      }
    },
    handleChangePro7(id) {
      let obj = {}
      obj = this.supplierContentList.find((item) => {
        return item.name === id
      })
      this.corsesList.serviceTypeId = obj.id
    },

    handleChangePro8(id) {
      let obj = {}
      obj = this.CourseSchedule.find((item) => {
        return item.name === id
      })
      this.corsesList.courseScheduleId = obj.id
    },

    getList() {
      this.editDisabled = false
      this.listLoading = true
      poCourseSupplierList(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.listLoading = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
